<!--
 * @Description: 操作责任区域设置
 * @Author: wind-lc
 * @version: 1.0
 * @Date: 2021-09-16 20:52:44
 * @LastEditTime: 2021-09-18 18:23:15
 * @FilePath: \cscec-pms-admin\src\views\project\responsibilityAreaSetting\components\AreaSettingOperation.vue
-->
<template>
  <base-modal
    :title="title"
    :closable="true"
    :visible="visible"
    destroy-on-close
    width="900px"
    ok-text="提交"
    :confirm-loading="confirmLoading"
    @cancel="handleClose"
    @ok="handleSubmit"
  >
    <custom-form
      ref="form"
      :is-validate="true"
      :edit-model="''"
      :rules="rules"
      :form="form"
      :form-list="formOption"
    />
  </base-modal>
</template>
<script>
import BaseModal from '@/components/BaseModal'
import responsibilityAreaSetting from '@/api/project/responsibilityAreaSetting'
export default {
  name: 'AreaSettingOperation',
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    type: {
      type: String,
      require: true
    },
    data: {
      type: Object,
      require: true
    }
  },
  components: {
    BaseModal
  },
  data() {
    return {
      // 标题
      title: '责任区域设置',
      // 表单
      form: {
        dutyAreaName: ''
      },
      // 提交加载
      confirmLoading: false
    }
  },
  computed: {
    // 表单配置
    formOption() {
      return [
        {
          label: '父级责任区域',
          keyName: 'parentName',
          type: 'BaseInput',
          disabled: true,
          wrap: true,
          span: 12
        },
        {
          label: '责任区域名称',
          keyName: 'dutyAreaName',
          type: 'BaseInput',
          span: 12,
          rules: [{ required: true, message: '请输入', trigger: 'change' }]
        }
      ]
    },
    // 校验
    rules() {
      const obj = {}
      this.formOption.map((item) => {
        if (item.rules) {
          obj[item.keyName] = item.rules
        }
      })
      return obj
    }
  },
  watch: {
    visible: {
      handler(val) {
        if (val) {
          if (this.type === 'add') {
            // 新增
            this.form.parentName = this.data.dutyAreaName
            this.form.parentId = this.data.id
            this.form.status = 1
          } else {
            // 编辑
            this.form.parentName = this.data.parentName
            this.form.dutyAreaName = this.data.dutyAreaName
            this.form.parentId = this.data.parentId
            this.form.id = this.data.id
            this.form.status = this.data.status
          }
        }
      }
    }
  },
  methods: {
    /**
     * @description: 关闭
     * @param {void}
     * @return {void}
     */
    handleClose() {
      this.$emit('update:visible', false)
      this.form = {
        dutyAreaName: ''
      }
    },
    /**
     * @description: 更新
     * @param {void}
     * @return {void}
     */
    handleUpdate() {
      this.$emit('update', [this.data.id])
    },
    /**
     * @description: 提交
     * @param {void}
     * @return {void}
     */
    handleSubmit() {
      try {
        this.$refs.form.validate((valid) => {
          if (valid) {
            const { dutyAreaName, id, parentId } = this.form
            let params = {}
            let fn = null
            if (this.type === 'add') {
              params = {
                dutyAreaName,
                parentId
              }
              fn = responsibilityAreaSetting.addDutyAreaSetting
            } else {
              params = { dutyAreaName, id, parentId }
              fn = responsibilityAreaSetting.updateDutyAreaSetting
            }
            this.confirmLoading = true
            fn(params)
              .then(({ code }) => {
                if (code === 200) {
                  this.$message.success('操作成功')
                  this.handleClose()
                  this.handleUpdate()
                }
              })
              .finally(() => {
                this.confirmLoading = false
              })
          }else {
            this.$message.warning("请填写完所有必填项信息")
          }
        })
      } catch (error) {
        console.log(error)
      }
    }
  }
}
</script>
<style lang="less" scoped>
</style>

